<template>
  <div class="home-page">
    <!-- 上部分：轮播背景 -->
    <div class="hero-section">
      <el-carousel
          :interval="5000"
          arrow="never"
          height="calc(100vh - 80px)"
          trigger="click"
          motion-blur
          :autoplay="true"
      >
        <el-carousel-item v-for="(image, index) in carouselImages" :key="index">
          <div
              class="carousel-background"
              :style="{ backgroundImage: `url(${image})` }"
          ></div>
        </el-carousel-item>
      </el-carousel>

      <!-- 文字说明覆盖在轮播图上 -->
      <div class="hero-content">
        <div class="hero-title">育种材料大数据管理平台</div>
        <div class="hero-description">
          育种材料大数据管理平台，后台采用大数据集群架构设计，有效提高系统的高可用性和稳定性。可以支持储存和管理海量(PB级别)标记和基因型数据，并整合了各类分析可视化工具进行深度挖掘。
        </div>
      </div>
    </div>

    <!-- 下部分：功能服务 -->
    <div class="services-section">
      <div class="services-title">功能服务</div>

      <div class="cards-container">
        <!-- 第一张卡片：材料数据管理 -->
        <el-card class="service-card">
          <div class="card-content">
            <!-- 左边图片部分 -->
            <div class="card-left">
              <div
                  class="card-image"
                  :style="{ backgroundImage: 'url(/breed/function1.png)' }"
              >
                <div class="image-text">材料数据管理</div>
              </div>
            </div>

            <!-- 右边内容部分 -->
            <div class="card-right">
              <!-- 第一部分：标题 -->
              <div class="card-main-title blue-text">材料数据上传和分析</div>

              <!-- 第二部分：描述 -->
              <div class="card-description">
                提供完整的育种材料数据管理解决方案，包括材料信息录入、基因型数据管理、表型数据整合等功能，支持多维度数据查询和统计分析。
              </div>

              <!-- 第三部分：功能选项 -->
              <div class="function-options">
                <div class="option-item blue-dot">
                  <span class="dot-icon"></span>
                  <span class="option-text">材料元数据管理</span>
                </div>
                <div class="option-item blue-dot">
                  <span class="dot-icon"></span>
                  <span class="option-text">材料基因型数据管理</span>
                </div>
                <div class="option-item blue-dot">
                  <span class="dot-icon"></span>
                  <span class="option-text">材料表型数据管理</span>
                </div>
                <div class="option-item blue-dot">
                  <span class="dot-icon"></span>
                  <span class="option-text">数据管理操作日志</span>
                </div>
              </div>

              <!-- 第四部分：按钮 -->
              <el-button class="start-button blue-bg" @click="navigateToMaterial">
                开始使用
              </el-button>
            </div>
          </div>
        </el-card>

        <!-- 第二张卡片：基因型数据分析 -->
        <el-card class="service-card">
          <div class="card-content">
            <!-- 左边图片部分 -->
            <div class="card-left">
              <div
                  class="card-image"
                  :style="{ backgroundImage: 'url(/breed/function2.png)' }"
              >
                <div class="image-text">基因型数据分析</div>
              </div>
            </div>

            <!-- 右边内容部分 -->
            <div class="card-right">
              <!-- 第一部分：标题 -->
              <div class="card-main-title orange-text">基因型数据上传和分析</div>

              <!-- 第二部分：描述 -->
              <div class="card-description">
                专业的基因型数据分析平台，提供SNP标记分析、基因分型、等位基因频率统计等功能，支持大规模基因组数据的快速处理和可视化展示。
              </div>

              <!-- 第三部分：功能选项 -->
              <div class="function-options">
                <div class="option-item orange-dot">
                  <span class="dot-icon"></span>
                  <span class="option-text">基因型基础统计</span>
                </div>
                <div class="option-item orange-dot">
                  <span class="dot-icon"></span>
                  <span class="option-text">群体结构分析</span>
                </div>
                <div class="option-item orange-dot">
                  <span class="dot-icon"></span>
                  <span class="option-text">亲缘关系分析</span>
                </div>
                <div class="option-item orange-dot">
                  <span class="dot-icon"></span>
                  <span class="option-text">LD衰减分析</span>
                </div>
              </div>

              <!-- 第四部分：按钮 -->
              <el-button class="start-button orange-bg" @click="navigateToGenotype">
                开始使用
              </el-button>
            </div>
          </div>
        </el-card>

        <!-- 第三张卡片：表型数据管理 -->
        <el-card class="service-card">
          <div class="card-content">
            <!-- 左边图片部分 -->
            <div class="card-left">
              <div
                  class="card-image"
                  :style="{ backgroundImage: 'url(/breed/function3.png)' }"
              >
                <div class="image-text">表型数据管理</div>
              </div>
            </div>

            <!-- 右边内容部分 -->
            <div class="card-right">
              <!-- 第一部分：标题 -->
              <div class="card-main-title green-text">表型数据上传和分析</div>

              <!-- 第二部分：描述 -->
              <div class="card-description">
                全面的表型数据管理系统，支持各类表型性状数据的采集、存储、查询和分析，提供表型数据质量控制和统计分析功能。
              </div>

              <!-- 第三部分：功能选项 -->
              <div class="function-options">
                <div class="option-item green-dot">
                  <span class="dot-icon"></span>
                  <span class="option-text">敬请期待</span>
                </div>
                <div class="option-item green-dot">
                  <span class="dot-icon"></span>
                  <span class="option-text">敬请期待</span>
                </div>
                <div class="option-item green-dot">
                  <span class="dot-icon"></span>
                  <span class="option-text">敬请期待</span>
                </div>
                <div class="option-item green-dot">
                  <span class="dot-icon"></span>
                  <span class="option-text">敬请期待</span>
                </div>
              </div>

              <!-- 第四部分：按钮 -->
              <el-button class="start-button green-bg" @click="navigateToPhenotype">
                开始使用
              </el-button>
            </div>
          </div>
        </el-card>

        <!-- 第四张卡片：GWAS&GS分析 -->
        <el-card class="service-card">
          <div class="card-content">
            <!-- 左边图片部分 -->
            <div class="card-left">
              <div
                  class="card-image"
                  :style="{ backgroundImage: 'url(/breed/function4.png)' }"
              >
                <div class="image-text">GWAS&GS分析</div>
              </div>
            </div>

            <!-- 右边内容部分 -->
            <div class="card-right">
              <!-- 第一部分：标题 -->
              <div class="card-main-title purple-text">GWAS&GS数据上传和分析</div>

              <!-- 第二部分：描述 -->
              <div class="card-description">
                全基因组关联分析(GWAS)和基因组选择(GS)分析平台，整合多种统计模型和算法，为分子育种提供精准的标记辅助选择支持。
              </div>

              <!-- 第三部分：功能选项 -->
              <div class="function-options">
                <div class="option-item purple-dot">
                  <span class="dot-icon"></span>
                  <span class="option-text">敬请期待</span>
                </div>
                <div class="option-item purple-dot">
                  <span class="dot-icon"></span>
                  <span class="option-text">敬请期待</span>
                </div>
                <div class="option-item purple-dot">
                  <span class="dot-icon"></span>
                  <span class="option-text">敬请期待</span>
                </div>
                <div class="option-item purple-dot">
                  <span class="dot-icon"></span>
                  <span class="option-text">敬请期待</span>
                </div>
              </div>

              <!-- 第四部分：按钮 -->
              <el-button class="start-button purple-bg" @click="navigateToGWAS">
                开始使用
              </el-button>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 轮播图片
const carouselImages = ref([
  '/breed/background2.png',
  '/breed/background1.png'
]);

// 导航函数
const navigateToMaterial = () => {
  router.push('/MaterialDataManagement/GenotypeData');
};

const navigateToGenotype = () => {
  router.push('/genotype/analysis');
};

const navigateToPhenotype = () => {
  router.push('/phenotype/management');
};

const navigateToGWAS = () => {
  router.push('/gwas/analysis');
};
</script>

<style scoped>
.home-page {
  width: 100%;
  min-height: 100vh;
}

/* 上部分：轮播背景样式 */
.hero-section {
  position: relative;
  width: 100%;
  height: calc(100vh - 80px);
}

.carousel-background {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-content {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  max-width: 600px;
  text-align: left;
  color: #000;
  z-index: 2;
}

.hero-title {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 20px;
  line-height: 1.2;
}

.hero-description {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

/* 下部分：功能服务样式 */
.services-section {
  width: 100%;
  padding: 60px 20px;
  background-color: #f8f9fa;
}

.services-title {
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 50px;
  color: #000;
}

.cards-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.service-card {
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  width: 100%;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.card-content {
  display: flex;
  height: 350px; /* 增加卡片高度 */
  width: 100%;
}

.card-left {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.card-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
}

.image-text {
  color: white;
  font-size: 28px; /* 增大字体 */
  font-weight: bold;
  z-index: 1;
  text-align: center;
  padding: 0 20px;
}

.card-right {
  flex: 1.2;
  padding: 35px; /* 增加内边距 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-main-title {
  font-size: 22px; /* 增大标题字体 */
  font-weight: bold;
  margin-bottom: 15px;
}

.blue-text {
  color: #1890ff;
}

.orange-text {
  color: #ff4d4f;
}

.green-text {
  color: #52c41a;
}

.purple-text {
  color: #722ed1;
}

.card-description {
  font-size: 16px; /* 增大描述字体 */
  line-height: 1.6;
  color: #666;
  margin-bottom: 25px;
  flex: 1;
  text-align: left; /* 描述文字左对齐 */
}

.function-options {
  display: flex;
  flex-direction: column;
  gap: 12px; /* 增加选项间距 */
  margin-bottom: 25px;
}

.option-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: none;
  border: none;
  font-size: 15px; /* 增大选项字体 */
  color: #666;
  cursor: not-allowed;
}

.dot-icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.blue-dot .dot-icon {
  background-color: #1890ff;
}

.orange-dot .dot-icon {
  background-color: #ff4d4f;
}

.green-dot .dot-icon {
  background-color: #52c41a;
}

.purple-dot .dot-icon {
  background-color: #722ed1;
}

.option-text {
  line-height: 1.4;
}

.start-button {
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  padding: 12px 24px; /* 增大按钮内边距 */
  font-size: 16px; /* 增大按钮字体 */
  transition: all 0.3s ease;
  width: 140px; /* 增大按钮宽度 */
}

.start-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.blue-bg {
  background-color: #1890ff;
}

.blue-bg:hover {
  background-color: #40a9ff;
}

.orange-bg {
  background-color: #ff4d4f;
}

.orange-bg:hover {
  background-color: #ff7875;
}

.green-bg {
  background-color: #52c41a;
}

.green-bg:hover {
  background-color: #73d13d;
}

.purple-bg {
  background-color: #722ed1;
}

.purple-bg:hover {
  background-color: #9254de;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .cards-container {
    max-width: 900px;
  }

  .card-content {
    height: 320px;
  }
}

@media (max-width: 768px) {
  .hero-content {
    left: 5%;
    right: 5%;
    max-width: none;
  }

  .hero-title {
    font-size: 28px;
  }

  .hero-description {
    font-size: 14px;
  }

  .services-title {
    font-size: 28px;
    margin-bottom: 30px;
  }

  .card-content {
    flex-direction: column;
    height: auto;
  }

  .card-left {
    height: 200px;
  }

  .card-right {
    padding: 25px;
  }

  .services-section {
    padding: 40px 15px;
  }

  .image-text {
    font-size: 24px;
  }

  .card-main-title {
    font-size: 20px;
  }

  .card-description {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 24px;
  }

  .services-title {
    font-size: 24px;
  }

  .image-text {
    font-size: 20px;
  }

  .card-main-title {
    font-size: 18px;
  }

  .card-right {
    padding: 20px;
  }

  .start-button {
    width: 120px;
    padding: 10px 20px;
    font-size: 14px;
  }
}
</style>